<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./cart.css">
</head>

<body>
  <div class="box">
    <div class="container">
      <my-cart></my-cart>
    </div>
  </div>

  <script src="./js/vue.js"></script>

  <script>

    var CartTitle = {
      props: ['name'],
      template: `
        <div class="title">{{name}}的商品</div>
      `
    }

    var CartList = {
      props: ['list'],
      template: `
        <div>
          <div :key='item.id' v-for='item in list' class="item">
            <img :src="item.img"/>
            <div class="name">{{item.name}}</div>
            <div class="change">
              <a href="" @click.prevent='sup(item.id)'>－</a>
              <input type="text" class="num" :value='item.num' @keyup.enter='changeNum(item.id,$event)' />
              <a href="" @click.prevent='add(item.id)'>＋</a>
            </div>
            <div class="del" @click="$emit('delevent',item.id)">×</div>
          </div>         
        </div>
      `,
      methods: {
        sup(id) {
          this.$emit('change-num', { id: id, type: 'sup' })
        },
        add(id) {
          this.$emit('change-num', { id: id, type: 'add' })
        },
        changeNum(id, event) {
          this.$emit('change-num', { id: id, num: event.target.value, type: 'change' })
        }
      }
    }

    var CartTotal = {
      props: ['shopList'],
      template: `
        <div class="total">
          <span>总价：{{total}}</span>
          <button>结算</button>
        </div>
      `,
      computed: {
        total: function () {
          var t = 0
          this.shopList.forEach(item => {
            t += item.price * item.num
          })

          return t
        }
      }

    }


    Vue.component('my-cart', {
      data: function () {
        return {
          uname: '张三',
          list: [{
            id: 1,
            name: 'TCL彩电',
            price: 1000,
            num: 1,
            img: 'img/a.jpg'
          }, {
            id: 2,
            name: '机顶盒',
            price: 1000,
            num: 1,
            img: 'img/b.jpg'
          }, {
            id: 3,
            name: '海尔冰箱',
            price: 1000,
            num: 1,
            img: 'img/c.jpg'
          }, {
            id: 4,
            name: '小米手机',
            price: 1000,
            num: 1,
            img: 'img/d.jpg'
          }, {
            id: 5,
            name: 'PPTV电视',
            price: 1000,
            num: 2,
            img: 'img/e.jpg'
          }]
        }
      },
      template: `
        <div class="cart">
          <cart-title :name='uname'></cart-title>
          <cart-list :list='list' @delevent='delHandle($event)' @change-num='changeNum($event)'></cart-list>
          <cart-total :shopList='list'></cart-total>
        </div>
      `,
      methods: {
        changeNum(val) {
          // console.log(val)

          if (val.type === 'change') {
            this.list.some(item => {
              if (item.id === val.id) {
                return item.num = val.num
              }
            })
          } else if (val.type === 'sup') {
            this.list.some(item => {
              if (item.id === val.id) {
                return item.num -= 1
              }
            })
          } else if (val.type === 'add') {
            this.list.some(item => {
              if (item.id === val.id) {
                return item.num += 1
              }
            })
          }

        },
        delHandle(id) {
          // console.log(id)
          this.list = this.list.filter(item => {
            return item.id != id
          })
        }
      },
      components: {
        'cart-title': CartTitle,
        'cart-list': CartList,
        'cart-total': CartTotal
      }
    })

    var vm = new Vue({
      el: '.box',
      data: {}
    })
  </script>
</body>

</html>